<template>
    <div class="sign-page">
        <div class="top">
            <router-link tag="div" to="/home" class="left">
                <img src="../assets/images/back_b_icon.png" alt="">
            </router-link>
            <div class="md-title">获取厨币</div>
            <div style="width:20px"></div>
        </div>
        <div class="lists-content">
            <div class="sign">
                <div class="sign-top">每日签到</div>
                <ul class="sign-md">
                    <li :class="{'active':day == item.date}" v-for="(item,index) in daylist" :key="index">
                        <div class="m">{{item.date | mounthTime}}月</div>
                        <div class="d">{{item.date | dateTime}}</div>
                        <div class="signImg" v-if="item.isbig=='1'">
                            <img src="../assets/images/ic_sign_in.png" alt="">
                        </div>
                    </li>
                </ul>
                <div class="sign-btm">
                    <div class="bg">
                        <img src="../assets/images/sign_bg_qd.png" alt="">
                    </div>
                    <div class="sign-txt">
                        <div class="left">
                            <div class="title">
                                <h4>{{sum}}</h4>
                                 <img src="../assets/images/sign_next.png" alt="">
                            </div>
                            <span class="cb">当前厨币</span>
                            <span class="signday">已累计签到<i>{{days}}</i>天</span>
                        </div>
                        <div class="right">
                            <div class="r-top">
                                <span>签到提醒</span>
                                <img src="../assets/images/sign_close.png" alt="">
                            </div>
                            <div class="r-btm">
                                <h4 @click="sigin"  v-if="!isSigin">签到</h4>
                                <h4 class="siginActive" v-else>已签到</h4>
                                <span>每天签到奖励30厨币</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="shop">
                <img src="../assets/images/icon_ecook_shop_banner.png" alt="">
            </div>
            <div class="daily-test">
                <div class="daily-top">每日任务</div>
                <div class="daily-cont">
                    <div class="dailyitem">
                        <div class="img">
                            <img src="../assets/images/sign_cp.png" alt="">
                            <div class="test">
                                <span class="t" v-if="!siginCom">每日签到 (0/1)</span>
                                <span class="t" v-if="siginCom">每日签到 (1/1)</span>
                                <span class="b"></span>
                            </div>
                        </div>
                        <div class="done" v-if="!siginCom">去完成</div>
                        <div class="done siginCom" v-if="siginCom">已完成</div>
                    </div>
                    <div class="dailyitem">
                        <div class="img">
                            <img src="../assets/images/sign_pl.png" alt="">
                            <div class="test">
                                <span class="t">评论 (0/20)</span>
                                <span class="b"></span>
                            </div>
                        </div>
                        <div class="done">去完成</div>
                    </div>
                    <div class="dailyitem">
                        <div class="img">
                            <img src="../assets/images/sign_sh.png" alt="">
                            <div class="test">
                                <span class="t">发表食话 (0/5)</span>
                                <span class="b"></span>
                            </div>
                        </div>
                        <div class="done">去完成</div>
                    </div>
                    <div class="dailyitem">
                        <div class="img">
                            <img src="../assets/images/sign_dz.png" alt="">
                            <div class="test">
                                <span class="t">点赞 (0/20)</span>
                                <span class="b"></span>
                            </div>
                        </div>
                        <div class="done">去完成</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {Toast} from 'vant'
import {getSigninConfigData,getSigninDetailData,getDailyTasksData} from '../api/sign'
    export default {
        data() {
            return {
                day:null,
                daylist:[],
                signlist:[],
                isSigin:false,
                days:0,
                siginCom:false
            };
        },
        methods: {
            getCurrentday(){
                let t = new Date()
                let y = t.getFullYear()
                let m = t.getMonth()+1<10?'0'+String(t.getMonth()+1):t.getMonth()+1
                let d = t.getDate()<10?'0'+String(t.getDate()):t.getDate()
                this.day = `${y}-${m}-${d} 00:00:00`
            },
            //获取时间
            getSigninConfigFun(){
                getSigninConfigData().then(data=>{
                    console.log(data);
                    if (data.detail.list) {
                        this.daylist = data.detail.list

                        let signdata = JSON.parse(window.localStorage.getItem("signlist"))
                        if (signdata) {
                            this.signlist = signdata
                            this.daylist.forEach(item=>{
                                signdata.forEach(k=>{
                                    if (item.date==k.date) {
                                        item.isbig = '1'
                                    }
                                })
                            })
                        }
                        this.daylist.forEach(item=>{
                            if (item.date==this.day) {
                                if (item.isbig=='1') {
                                    this.isSigin = true
                                    this.siginCom = true
                                }
                            }
                        })
                        this.sigindaysFun()
                    }
                })
            },
            //获取签到详情
            getSigninDetailFun(){
                getSigninDetailData().then(data=>{
                    console.log(data);
                })
            },
            //每日任务
            getDailyTasksFun(){
                getDailyTasksData().then(data=>{
                    console.log(data);
                })
            },
            //签到天数
            sigindaysFun(){
                //签到天数
                // let siginday = this.daylist.filter(item=>item.isbig=='1')
                this.days = this.signlist.length
            },
            //签到
            sigin(){
                    let index = this.daylist.findIndex(item=>item.date==this.day)
                    this.daylist[index].isbig='1'
                    this.signlist.push({
                        date:this.day
                    })
                    this.isSigin = true
                    this.siginCom = true
                    this.sigindaysFun()
                    Toast.success('签到成功，厨币+30');
                    window.localStorage.setItem("signlist",JSON.stringify(this.signlist))
            }
        },
        created() {
            this.getCurrentday()
            this.getSigninConfigFun()
            // this.getDailyTasksFun()
            // this.getSigninDetailFun()
        },
        filters:{
            mounthTime(value){
                if (value) {
                    let date = value.split(" ")[0]
                    let t = date.split("-")
                    let m = t[1]
                    return m
                }
            },
            dateTime(value){
                if (value) {
                    let date = value.split(" ")[0]
                    let t = date.split("-")
                    let d = t[2]
                    return d
                }
            }
        },
        computed:{
            sum(){
                return this.signlist.reduce((total)=>{
                        return total+=30              
                },0)
            }
        }

    }
</script>

<style lang="less" scoped>
.sign-page{
    height: 100%;
    overflow-y: scroll;
    .top{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f2f2f2;
        background-color: #fff;
        z-index: 999;
        .left{
            margin-left: 10px;
            &>img{
                width: 12px;
                height: 20px;
            }
        }
        .md-title{
            font-size: 16px;
            font-weight: bold;
            letter-spacing: 0.8px;
        }
    }
    .lists-content{
        margin-top: 50px;
        padding-top: 20px;

        .sign{
            
            .sign-top{
                font-size: 17px;
                font-weight: bold;
                letter-spacing: 0.8px;
                margin-bottom: 20px;
                padding: 0 15px;
            }
            .sign-md{
                display: flex;
                align-items: center;
                text-align: center;
                line-height: 20px;
                font-size: 15px;
                padding: 0 8px;

                &>li{
                    height: 40px;
                    margin: 0 3px;
                    padding-bottom: 8px;
                    padding-top: 5px;
                    border-top-left-radius: 8px;
                    border-top-right-radius: 8px;
                    color: #fff;
                    width: 100%;
                    background-image: url(../assets/images/sign_bg_orange.png);
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    position: relative;

                    &>img{
                        width: 25px;
                        height: 25px;
                        margin-top: 10px;
                    }
                    .signImg{
                        width: 12px;
                        height: 12px;
                        position: absolute;
                        bottom: 5px;
                        right: 0;
                    }
                    
                }
                    .active{
                        color: #000;
                        background-image: url(../assets/images/sign_bg_white.png);
                    }
            }
            .sign-btm{
                width: 100%;
                height: 130px;
                box-sizing: border-box;
                padding: 20px;
                position: relative;
                .bg{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                }
                .sign-txt{
                    display: flex;
                    justify-content: space-between;
                    position: relative;
                    z-index: 10;

                    .left{
                        flex: 0 0 150px;
                        margin-left: 10px;
                       .title{
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;
                        
                         &>img{
                            width: 8px;
                            height: 15px;
                            display: inline-block;
                            margin-left: 5px;
                            }
                            &>h4{
                                font-size: 18px;
                                font-weight: bold;
                                display: inline-block;
                            }
                       }
                        &>span{
                            display: block;
                        }
                        .cb{
                            font-size: 14px;
                            color: #999;
                            font-weight: bold;
                        }
                        .signday{
                            margin-top: 15px;
                            font-size: 15px;
                            font-weight: bold;
                            letter-spacing: 0.8px;
                            &>i{
                                color: red;
                            }
                        }
                    }
                    .right{
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        justify-content: space-between;
                        .r-top{
                            display: flex;
                            align-items: center;
                            margin-top: -8px;
                            &>span{
                                font-size: 15px;
                                font-weight: bold;
                                margin-right: 5px;
                                color: #ababa9;
                                letter-spacing: 0.8px;
                            }
                            &>img{
                                width: 40px;
                                height: 25px;
                            }
                        }   
                        .r-btm{
                            margin-top: 15px;
                            display: flex;
                            flex-direction: column;
                            text-align: center;
                            // align-items: flex-end;
                            &>h4{
                                width: 80px;
                                // margin-right: 10px;
                                padding: 10px 15px;
                                border-radius: 10px;
                                color: #fff;
                                font-weight: bold;
                                letter-spacing: 0.8px;
                                background-image: linear-gradient(90deg,#fbdc50,#fd9d45);
                            }
                            .siginActive{
                                background-color: #ccc;
                                background-image: none;
                                color: #999;
                            }
                            &>span{
                                font-size: 12px;
                                margin-top: 5px;
                                color: #999;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }
        .shop{
            margin: 20px 10px;
        }
        .daily-test{

            .daily-top{
                font-size: 17px;
                font-weight: bold;
                letter-spacing: 0.8px;
                margin-bottom: 20px;
                padding: 0 15px;
            }
            .daily-cont{
                padding: 0 10px;

                .dailyitem{
                    width: 100%;
                    height: 60px;
                    margin: 10px 0;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .img{
                        display: flex;
                        // align-items: center;
                        height: 50px;
                        &>img{
                            width: 50px;
                            height: 50px;
                        }
                        .test{
                            display: flex;
                            flex-direction: column;
                            margin-left: 10px;
                            .t{
                                font-size: 16px;
                                font-weight: bold;
                                margin-top: 10px;
                                margin-bottom: 10px;
                            }
                            .b{
                                font-size: 12px;
                                color: #999;
                                font-weight: bold;
                            }
                        }
                    }
                    .done{
                        height: 15px;
                        font-size: 14px;
                        padding:6px 8px;
                        background-color: #fff8ee;
                        color: #f6b558;
                        font-weight: bold;
                        border-radius: 6px;
                    }
                    .siginCom{
                        background-color: #ccc;
                        color: #999;
                    }
                }
            }
        }
    }

}
</style>